<template>
  <vant-form ref="form" :validate-first="true" class="page-p-l page-p-r" input-align="right">
    <vant-field
      label="姓名"
      v-model="form.agentName"
      placeholder="请输入"
      input-align="right"
      ref="agentName"
      key="agentNameField"
      @touchstart="clickField(form)"
      :rules="[{ required:true }]"
    />
    <app-dropdown-search
      v-model="form.agentName"
      :getOptions="getOptions"
      key="agentName"
      :immediate="form._immediateSearch"
      @change="changeAgentName"
    ></app-dropdown-search>

    <vant-field
      label="身份证号"
      v-model="form.agentId"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    />
    <vant-field
      label="联系电话"
      v-model="form.agentTel"
      type="tel"
      placeholder="请输入"
      input-align="right"
      :rules="[{ required:true }]"
    />
    <div></div>
  </vant-form>
</template>

<script>
import { saveGovAgent } from '@apis/apply'
import { agent } from '@apis/history'
import { getOverflowAutoEl, scrollToEle } from '@utils/style'
import mixin from './mixin'
export default {
  name: 'ApplyAgent',
  mixins: [mixin],
  data() {
    return {
      form: this.curForm,
    }
  },
  created() {
    this.setFormVal();
    this.saveGovAgent()
  },
  methods: {
    clickField(form){
      form._immediateSearch=true

      
      const field = this.$refs['agentName'].$el;
      this.$_autoEl = this.$_autoEl || getOverflowAutoEl(field);
      scrollToEle(field, this.$_autoEl)
    },
    getOptions() {
      return agent().then(res => {
        const { data = [] } = res || {}
        return data.map(item => ({ ...item, value: item.agentName, text: item.agentName }))
      })
    },
    setFormVal(data = {}) {
      ['agentName', 'agentId', 'agentTel'].forEach(key => {
        this.$set(this.form, key, data[key] ? data[key] : '')
      });

    },
    saveGovAgent() {
      saveGovAgent().then(res => {
        const { data = {} } = res || {};
        this.setFormVal(data);
      })
    },
    changeAgentName(info) {
      this.setFormVal(info);
    },
    submit() {
      return Promise.resolve(this.form);
    }
  }
}
</script>

<style lang="less" scoped>
</style>